<script setup lang="ts">
  import { CopyDocument, Plus } from '@element-plus/icons-vue';
  import { ElContainer, ElHeader, ElMain, ElRow, ElCol, ElTooltip, ElIcon } from 'element-plus';
</script>

<template>
  <div class="animation">
    <el-container style="height: 95vh; display: flex; flex-direction: column">
      <el-header style="height: 5vh; margin-top: 16px">
        <el-row>
          <el-col :span="18"> 自定义动画</el-col>
          <el-col :span="3">
            <el-tooltip class="box-item" effect="dark" content="新建" placement="top">
              <el-icon>
                <Plus />
              </el-icon>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip class="box-item" effect="dark" content="复制到其他模型" placement="top">
              <el-icon>
                <CopyDocument />
              </el-icon>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-header>
      <el-main
        style="
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        "
      >
        <div class="image-container">
          <img
            src="https://img2.baidu.com/it/u=2779514760,1567633763&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1735750800&t=120ce5138efefc9107f92a0e6d7bc377"
            alt="First Image"
            class="image"
          />
        </div>
      </el-main>
      <el-header style="height: 5vh; margin-top: 16px"> 自带动画</el-header>
      <el-main
        style="
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        "
      >
        <div class="image-container">
          <img
            src="https://img2.baidu.com/it/u=2779514760,1567633763&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1735750800&t=120ce5138efefc9107f92a0e6d7bc377"
            alt="First Image"
            class="image"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
  .animation {
    background-color: #1e2430;
    color: white;
    height: 95vh;
    overflow: auto;
  }
  :deep(.el-header) {
    color: #c9cbd5 !important;
    margin-left: 0.8vw;
    font-weight: 550;
    font-size: 1vw;
  }
</style>
